/*
  @author zenghao0219&wenbin
  @description 用于座位图下发已选座位的展示
  @updateDate 最后更新时间为:2022-03-29
*/
<template>
  <div class='selected'>
    <!-- <div class="text">已选座位:</div> -->
    <div class="scroll" ref="scroll">
      <ul class="scroll-ul" ref="scrollUl">
        <li class="scroll-item" v-for="item in selectedSeat" :key="'select'+item.id" @click="cancelSelect(item)">
          <div class="scroll-item-t">
            <div :xt="'row:'+item.row+',col:'+item.col" class="f26 c3">{{item.seatNo}}</div><div class="sel-y">￥{{item.sale_price}}</div>
          </div>
          <div class="scroll-item-del"><img src="" alt="" srcset=""></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Bscroll from 'better-scroll'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    propSelectedSeat: Array
  },
  data () {
    // 这里存放数据
    return {
      selectedSeat: this.propSelectedSeat
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    propSelectedSeat: function (value) {
      let width = this.propSelectedSeat.length * 2.67 + 1.2
      this.$refs.scrollUl.style.width = width + 'rem'
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new Bscroll(this.$refs.scroll, {
            scrollX: true,
            // 忽略竖直方向的滚动
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    }
  },
  // 方法集合
  methods: {
    cancelSelect: function (item) {
      this.$emit('cancelSelect', item.orgIndex)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='stylus' rel='stylesheet/stylus' scoped='scoped'>
//@import url(); 引入公共css类
.selected
  position fixed
  z-index 10
  bottom 250px
  background #ffffff
  width 750px
  // padding 0 20px 0 20px
  height 93px
  overflow hidden
  // border-bottom: 2px dashed #ccc
  .text
    width 750px
    height 26px
    line-height 26px
    font-size 28px
    font-weight 400
  .scroll
    position absolute
    // height 140px
    width 750px
    top 0
    left 0
    z-index 11
    .scroll-ul
      width 750px
      display flex
      // margin-top 60px
      .scroll-item
        flex: none;
        margin-left 25px
        height 93px
        font-size 24px
        width 165px
        color #888888
        display: flex
        -webkit-justify-content: space-around;
        align-items: center;
        -webkit-align-items: center;
        // border 2px solid #888888
        background: #f6f6f6
        .scroll-item-t
          display: flex
          -webkit-flex-direction: column;
          flex-direction: column;
          justify-content: flex-end;
          -webkit-justify-content: flex-end;
          color: #333
          font-size: 26px
.sel-y
  color: #f00
  margin-top: 15px
.scroll-item-del
  img
    width: 17px
.f26
  font-size: 26px
.c3
  color: #333
</style>
